<template>
  <div class="files">
    <Title title="最近文件"></Title>
    <div class="file-list">
      <a-table
        :data="fileList"
        stripe
        :scroll="{ x: '100%', y: '100%' }"
        :pagination="false"
      >
        <template #columns>
          <a-table-column title="序号">
            <template #cell="{ rowIndex }">
              {{
                (pageConfig.pageSize ? pageConfig.pageSize : 10) *
                  ((pageConfig.current ? pageConfig.current : 1) - 1) +
                (rowIndex + 1)
              }}
            </template>
          </a-table-column>
          <a-table-column
            title="文件名称"
            data-index="fileName"
          ></a-table-column>
          <a-table-column
            title="项目名称"
            data-index="projectName"
          ></a-table-column>
          <a-table-column
            title="更新时间"
            data-index="updateDate"
          ></a-table-column>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { PaginationProps } from '@arco-design/web-vue';
  import Title from '../title/index.vue';

  const fileList = ref([
    {
      fileName: 'CDE需求说明书',
      projectName: 'CDE平台项目',
      updateDate: '2023-05-10',
    },
    {
      fileName: 'CDE需求说明书',
      projectName: 'CDE平台项目',
      updateDate: '2023-05-10',
    },
    {
      fileName: 'CDE需求说明书',
      projectName: 'CDE平台项目',
      updateDate: '2023-05-10',
    },
    {
      fileName: 'CDE需求说明书',
      projectName: 'CDE平台项目',
      updateDate: '2023-05-10',
    },
    {
      fileName: 'CDE需求说明书',
      projectName: 'CDE平台项目',
      updateDate: '2023-05-10',
    },
  ]);
  const pageConfig: PaginationProps = reactive({
    showTotal: true,
    showMore: true,
    showJumper: true,
    showPageSize: true,
    current: 1,
    pageSize: 10,
    total: 100,
  });
</script>

<style scoped lang="less">
  .file-list {
    margin-top: 16px;
    width: calc(100% - 64px);
    margin-left: 32px;
  }
</style>
